<template>
	<view class="page">
		<u-navbar
			:autoBack="true"
			placeholder
			@leftClick="confirm"
		>
			<!-- <view class="" slot="right">
				<view class="btn">
					<u-button type="primary" :customStyle="{height: '60rpx'}" color="#2979ff" text="确定" @click="confirm"></u-button>
				</view>
			</view> -->
		</u-navbar>
		
		<view class="page__head center">
			<u-search placeholder="请输入关键字" :showAction="false" v-model="keyword" @change="search"></u-search>
		</view>
		<view class="page__content">
			<view class="list" v-for="(item,index) in list" :key="item.Id">
				<view class="list__icon center" @click="choose(item)">
					<view class="list__icon--box">
						<image src="@/static/theme/default/home/checked.png" mode="" v-if="item.checked"></image>
					</view>
				</view>
				<view class="list__cover" @click="openForm(item)">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				<view class="list__content" @click="openForm(item)">
					<view class="list__content--title ellipsis">{{item.FormTitle}}</view>
					<view class="list__content--des ellipsis">{{item.FormDesc}}</view>
				</view>
			</view>
			<view class="no-data center" v-show="noData">抱歉，未查询到数据(￣▽￣)</view>
		</view>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js';
	import _data from '@/common/_data.js'
	import {sendBackFunction} from '@/common/custom_util.js'
	
	export default {
		data() {
			return {
				static_img: _data.data('static_img'),
				keyword: '',
				list: [],
				noData: false,
				selectList: []
			}
		},
		onLoad(options) {
			try {
				this.selectList = JSON.parse(options.data);
				console.log(this.selectList)
			} catch(e){console.log(e)}
		},
		methods: {
			/**
			 * 获取表单模板列表
			 * @param {Object} v
			 */
			getSmartFormList(v) {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSmartFormList',
					apiparam: {
						keyword: v, //关键词模糊查询
						typename: "",
						sorting: "asc", //asc:最早，desc:最新            
						isdraft: "0", //0:已发布，1:暂存在草稿
					},
					success(res) {
						res.forEach(item => {
							item.cover = that.static_img + '/' + item.CoverImage;
							try {
								let json = item.FormJson.replace(/%22/g,'"');
								item.FormJson = JSON.parse(json);
							} catch{}
							that.selectList.forEach(value => {
								if(item.Id == value.Id) {
									item.checked = true;
								}
							})
						})
						that.list = res;
						if(!res.length) that.noData = true;
					},
				})
			},
			openForm(v) {
				let obj = JSON.parse(JSON.stringify(v));
				uni.navigateTo({
					url: '../smart-form-add/view?type=1&data=' + JSON.stringify(obj)
				})
			},
			search(e) {
				if(!e) return
				this.noData = false;
				this.getSmartFormList(e)
			},
			choose(v) {
				this.$set(v,'checked',!v.checked);
				let flag = false;
				let i = -1;
				this.selectList.forEach((item,index) => {
					if(item.Id == v.Id) {
						flag = true;
						i = index;
					}
				})
				if(!flag) {
					this.selectList.push(JSON.parse(JSON.stringify(v)))
				} else {
					this.selectList.splice(i,1);
				}
				console.log(this.selectList)
			},
			confirm() {
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm['searchSelect'](this.selectList); //重点$vm
			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 100%;
		height: 100%;
	}
	
	.page {
		min-height: 100vh;
		
		&__head {
			height: 100rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #eee;
			background-color: #fff;
		}
		
		&__content {
			
		}
	}
	
	.list {
		height: 200rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		
		&__icon {
			width: 120rpx;
			height: 100%;
			
			&--box {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				border: 3rpx solid #d9d9d9;
			}
		}
		
		&__cover {
			width: 200rpx;
			height: 120rpx;
		}
		
		&__content {
			flex: 1;
			padding: 0 20rpx;
			
			&--title {
				font-size: 35rpx;
			}
			
			&--des {
				font-size: 26rpx;
				color: #aaa;
			}
		}
	}
	
	.btn {
		width: 110rpx;
	}
	
	.no-data {
		height: 400rpx;
		width: 100%;
		font-size: 27rpx;
		text-align: center;
	}
</style>
